<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>学生成绩管理系统 - 学生主页</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/all.min.css" rel="stylesheet">
    <style>
        .sidebar {
            min-height: 100vh;
            background-color: #343a40;
            padding-top: 20px;
        }
        .sidebar a {
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
            display: block;
        }
        .sidebar a:hover {
            background-color: #495057;
        }
        .sidebar a.active {
            background-color: #007bff;
        }
        .main-content {
            padding: 20px;
        }
        .card {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 sidebar">
                <h3 class="text-white text-center mb-4">学生系统</h3>
                <a href="#" class="active" onclick="showProfile()">
                    <i class="fas fa-user"></i> 个人信息
                </a>
                <a href="#" onclick="showGrades()">
                    <i class="fas fa-chart-bar"></i> 成绩查询
                </a>
                <a href="#" onclick="showChangePassword()">
                    <i class="fas fa-key"></i> 修改密码
                </a>
                <a href="#" onclick="logout()">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </a>
            </div>

            <!-- 主要内容区域 -->
            <div class="col-md-10 main-content">
                <!-- 个人信息卡片 -->
                <div id="profileCard" class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">个人信息</h5>
                        <button class="btn btn-primary btn-sm" onclick="editProfile()">编辑</button>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>学号：</strong><span id="studentId"></span></p>
                                <p><strong>中文名：</strong><span id="chineseName"></span></p>
                                <p><strong>英文名：</strong><span id="englishName"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>电话：</strong><span id="tel"></span></p>
                                <p><strong>班级：</strong><span id="stuClass"></span></p>
                                <p><strong>学期：</strong><span id="semester"></span></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 成绩信息卡片 -->
                <div id="gradesCard" class="card" style="display: none;">
                    <div class="card-header">
                        <h5 class="mb-0">成绩信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>期中成绩：</strong><span id="midMarks"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>期末成绩：</strong><span id="endMarks"></span></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 修改密码卡片 -->
                <div id="changePasswordCard" class="card" style="display: none;">
                    <div class="card-header">
                        <h5 class="mb-0">修改密码</h5>
                    </div>
                    <div class="card-body">
                        <form id="changePasswordForm">
                            <div class="mb-3">
                                <label class="form-label">原密码</label>
                                <input type="password" class="form-control" name="oldPassword" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">新密码</label>
                                <input type="password" class="form-control" name="newPassword" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">确认新密码</label>
                                <input type="password" class="form-control" name="confirmPassword" required>
                            </div>
                            <button type="submit" class="btn btn-primary">修改密码</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑个人信息模态框 -->
    <div class="modal fade" id="editProfileModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑个人信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editProfileForm">
                        <div class="mb-3">
                            <label class="form-label">中文名</label>
                            <input type="text" class="form-control" name="chineseName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">英文名</label>
                            <input type="text" class="form-control" name="englishName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">电话</label>
                            <input type="tel" class="form-control" name="tel" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateProfile()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后获取学生信息
        $(document).ready(function() {
            loadStudentInfo();
        });

        // 加载学生信息
        function loadStudentInfo() {
            $.get('${pageContext.request.contextPath}/student/info', function(student) {
                $('#studentId').text(student.studentId);
                $('#chineseName').text(student.chineseName);
                $('#englishName').text(student.englishName);
                $('#tel').text(student.tel);
                $('#stuClass').text(student.stuClass);
                $('#semester').text(student.semester);
                $('#midMarks').text(student.midMarks != null ? student.midMarks.toFixed(2) : '-');
                $('#endMarks').text(student.endMarks != null ? student.endMarks.toFixed(2) : '-');
            });
        }

        // 显示个人信息
        function showProfile() {
            $('#profileCard').show();
            $('#gradesCard').hide();
            $('#changePasswordCard').hide();
            $('.sidebar a').removeClass('active');
            $('.sidebar a:first').addClass('active');
        }

        // 显示成绩信息
        function showGrades() {
            $('#profileCard').hide();
            $('#gradesCard').show();
            $('#changePasswordCard').hide();
            $('.sidebar a').removeClass('active');
            $('.sidebar a:eq(1)').addClass('active');
        }

        // 显示修改密码
        function showChangePassword() {
            $('#profileCard').hide();
            $('#gradesCard').hide();
            $('#changePasswordCard').show();
            $('.sidebar a').removeClass('active');
            $('.sidebar a:eq(2)').addClass('active');
        }

        // 编辑个人信息
        function editProfile() {
            $.get('${pageContext.request.contextPath}/student/info', function(student) {
                const form = $('#editProfileForm');
                form.find('[name=chineseName]').val(student.chineseName);
                form.find('[name=englishName]').val(student.englishName);
                form.find('[name=tel]').val(student.tel);
                $('#editProfileModal').modal('show');
            });
        }

        // 更新个人信息
        function updateProfile() {
            const formData = {};
            $('#editProfileForm').serializeArray().forEach(function(item) {
                formData[item.name] = item.value;
            });
            
            $.ajax({
                url: '${pageContext.request.contextPath}/student/update',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(response) {
                    if (response.success) {
                        $('#editProfileModal').modal('hide');
                        loadStudentInfo();
                        alert('更新成功');
                    } else {
                        alert(response.message || '更新失败');
                    }
                }
            });
        }

        // 修改密码
        $('#changePasswordForm').on('submit', function(e) {
            e.preventDefault();
            
            const newPassword = $('[name=newPassword]').val();
            const confirmPassword = $('[name=confirmPassword]').val();
            
            if (newPassword !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }

            $.ajax({
                url: '${pageContext.request.contextPath}/user/update-password',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    oldPassword: $('[name=oldPassword]').val(),
                    newPassword: newPassword
                }),
                success: function(response) {
                    if (response.success) {
                        alert('密码修改成功');
                        $('#changePasswordForm')[0].reset();
                    } else {
                        alert(response.message || '密码修改失败');
                    }
                }
            });
        });

        // 退出登录
        function logout() {
            $.post('${pageContext.request.contextPath}/user/logout', function(response) {
                if (response.success) {
                    window.location.href = '${pageContext.request.contextPath}/login.jsp';
                }
            });
        }
    </script>
</body>
</html> 